<!-- 改为组件模式 -->
<template>
	<view class="content">
		<z-paging ref="paging" v-if="firstLoaded || isCurrentPage" v-model="dataList" @query="queryList"
			default-page-size='18' :show-loading-more-no-more-view="false">
			<view class="listitemview">
				<view class="listitem" v-for="(cell, index) in dataList" :key="cell.index" @click="goFriend(cell)">
					<view class="listitem__left">
						<cl-avatar :src="cell.avatar_url" size="100rpx"></cl-avatar>
					</view>
					<view class="listitem__right">
						<view class="listitem__right__top">
							<text class="listitem__right__top__nickname u-line-1">{{cell.friend_remark || cell.nick_name}}</text>
							<text
								v-if="cell.user_type && cell.user_type > 0 && cell.user_type != 6 && cell.user_type != 8"
								class="typetag"
								style="background-color: #02D478;">{{$t('common.friend.authority')}}</text>
						</view>
						<view class="listitem__right__content">
							<text v-if="friendOnline[cell.friend_idx]"
								style="color: #6aaf76;font-size: 24rpx;">[{{$t("common.friend.online")}}]</text>
							<text v-else
								style="color: #595A66;font-size: 24rpx;">[{{$t("common.friend.offline")}}]</text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		conversion
	} from '@/common/tools/letterConversion.js'
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'friend_list',
		data() {
			return {
				dataList: [],
				// 当前组件是否已经加载过了
				firstLoaded: false,
				// 是否滚动到当前页
				isCurrentPage: false
			}
		},
		props: {
			// 当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			// 当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			searchval: {
				type: String,
				default: function() {
					return ''
				}
			},
		},
		computed: {
			...mapState({
				friendList: state => state.friends.friendList,
				friendOnline: state => state.friends.friendOnline,
			}),
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex) {
						// 懒加载，当滑动到当前的item时，才去加载
						if (!this.firstLoaded) {
							// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
							this.$nextTick(() => {
								this.isCurrentPage = true;
							})
						}
					}
				},
				immediate: true
			},
			searchval: {
				handler(newVal) {
					this.reload()
				},
			},
		},
		onLoad() {},
		methods: {
			conversion,
			// 接收父组件传过来的刷新列表要求
			reload() {
				this.$nextTick(() => {
					// 刷新列表数据(如果不希望列表pageNo被重置可以用refresh代替reload方法)
					this.$refs.paging && this.$refs.paging.reload();
				})
			},
			goFriend(item) {
				this.$Router.push({
					name: 'friend_details',
					params: item
				});
			},
			queryList() {
				// 使用更高效的筛选操作
				const filteredData = this.friendList.filter(item => {
					// 当搜索值为空时，直接返回全部数据
					if (!this.searchval) {
						return true;
					}
					// 使用更高效的字符串包含检查
					return item.friend_remark.includes(this.searchval) || item.nick_name.includes(this.searchval);
				});
				console.log(this.friendOnline);
				
				filteredData.sort((friend1, friend2) => {
					  const isFriend1Online = this.friendOnline[friend1.friend_idx] || false; // 判断friend1是否在线
					  const isFriend2Online = this.friendOnline[friend2.friend_idx] || false; // 判断friend2是否在线
					  
					  // 如果friend1在线而friend2不在线，将friend1排在前面
					  if (isFriend1Online && !isFriend2Online) {
						return -1;
					  }
					  // 如果friend2在线而friend1不在线，将friend2排在前面
					  if (!isFriend1Online && isFriend2Online) {
						return 1;
					  }
					  // 否则保持原来的顺序
					  return 0;
				});
				
				this.$refs.paging.setLocalPaging(filteredData);
				this.firstLoaded = true;
			},
		},
	};
</script>

<style scoped lang="scss">
	.content {
		height: 100%;
	}
	.typetag{
		white-space: nowrap;
		font-size: 20rpx;
		color: #FFFFFF;
		padding: 0 10rpx;
		height: 28rpx;
		margin-left: 10rpx;
		line-height: 28rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: #FF7676;
	}
	.listitemview {
		// margin-top: 30rpx;
		.listitem {
			display: flex;
			align-items: center;
			padding: 12rpx 30rpx;
			position: relative;
	
			&.active {
				background-color: #1E1F30;
			}
			&__right {
				margin-left: 20rpx;
				flex: 1;
	
				&__top {
					display: flex;
					align-items: center;
	
					&__nickname {
						color: #fff;
						font-size: 28rpx;
					}
	
					&__time {
						color: #61626E;
						font-size: 20rpx;
					}
				}
			}
		}
	}
</style>